<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="">
        <meta name="deacription" content="">
        <link rel="stylesheet" href="./">
        <title></title>
        
    </head>
    <body>
        <div id="app">
            <input type="text" name="" id="" v-bind:value="meg">
            <a v-bind:href="baidu.url">{{baidu.name}}</a>

            <input type="text" v-model="meg">
            <textarea name="" v-model="meg"></textarea>
        </div>
        <script src="../js/vue.js"></script>
        <script>
            const vm = new Vue({
                data:{
                    meg:"hello",
                    baidu:{
                        name:"baidu",
                        url:"http://baidu.com",
                    }
                }
            });
            vm.$mount("#app");
            /*
            指令语法：
            v-bind: 
                作用：单向数据绑定（给标签/元素属性绑定动态的值）
                语法：v-bind:属性名="JS表达式"  -> 简写 :属性名="JS表达式"

            v-model: 双向数据绑定（通常用于表单元素：input、select、textarea）
                作用：双向数据绑定（通常用于表单元素：input、select、textarea）
                语法：v-model="JS表达式"

            单向：
                数据只能由js（数据层）流向html（视图层）
                如果修改html（视图层）数据，js（数据层）是不变的

            双向：
                数据能由js（数据层）流向html（视图层）
                数据能由html（视图层）流向js（数据层）
        */
        </script>
    </body>
</html>